<template>
  <Modal
    title="上传文件"
    :value="value"
    :mask-closable="true"
    :footer-hide="true"
    @input="$emit('input', $event)"
  >
    <Form
      ref="formLkyDocumentTableManage"
      :model="formLkyDocumentTableManage"
      :rules="ruleValidate"
      label-position="right"
      :label-width="80"
    >
      <FormItem label="上传文件" prop="file">
        <Upload
		:format="['doc','docx']"
		:on-format-error="uploadFormatError"
          ref="upload"
          action="/admin/SoJpt/file/studentFileUpload"
          :headers="headers"
          :show-upload-list="isShow"
          :before-upload="handleUpload"
          :on-success="uploadSuccess"
        >
          <Button icon="ios-cloud-upload-outline">选择文件上传</Button>
        </Upload>
        <div v-for="item in uploadList">
          Upload file: {{ item.name }}
          <a href="javascript:;"  @click="delectFile(item.keyID)">取消上传</a>
        </div>
      </FormItem>
      <FormItem>
        <Button type="primary" @click="uploadFiles" :loading="loadingStatus">上传</Button>
        <Button @click="handleReset" style="margin-left: 8px">重置</Button>
      </FormItem>
    </Form>
  </Modal>
</template>
<script>
import { save } from '@/api/lky/lkyTeacherReleaseRecord'
import { createModelObj, getToken } from '@/libs/util'
import { update } from '@/api/lky/lkyFileLookAndDown'

export default {
  name: 'Add',
  props: {
    value: {
      type: Boolean,
      default: false
    },
    UploadLkyDocumentTableManage: {
      type: Object,
      default: false
    }
  },
  data () {
    return {
      isShow: false,
      headers: {
        'Access-Control-Allow-Origin': '*'
      },
      loadingStatus: false,
      uploadList: [], // 上传文件列表
      formLkyDocumentTableManage: {
        file: ''
      },
      ruleValidate: {

      }
    }
  },
  methods: {
    delectFile (keyID) { // 删除文件
      // 删除总展示文件里的当前文件
      this.uploadList = this.uploadList.filter(item => {
        return item.keyID != keyID
      })
      console.log(this.uploadList)
    },
    uploadSuccess (res, file, fileList) {
      if (res) {
        this.$Message.success('上传成功!')
        this.loadingStatus = false
        // 上传成功后，将用户id和文档表id保存起来
        var obj = {}
        obj.id = res // 返回学生老师文档表数据id
        obj.uid = getToken()
        obj.admin_fid = this.UploadLkyDocumentTableManage.id
        update(Object.assign({}, createModelObj(obj, 'lkyTableStorage'))).then(res => {
          console.log('更新成功')
        })
        this.handleReset()
        this.$emit('input', false)
      }
    },
    uploadFormatError () {
	  this.$Message.error('上传类型只能是doc,docx')
    },
    uploadFiles () {
      this.loadingStatus = true
      for (let i = 0; i < this.uploadList.length; i++) {
        let item = this.uploadList[i]
        // 上传文件
        this.$refs.upload.post(item)
      }
    },
    handleReset () {
      // this.$refs[name].resetFields()
      this.uploadList = [] // 将上传文件列表清空
    },
    handleUpload (file) {
      // 选择文件后 这里判断文件类型 保存文件 自定义一个keyid 值 方便后面删除操作
      let keyID = Math.random().toString().substr(2)
      file['keyID'] = keyID
      // 保存文件到需要上传的文件数组里
      this.uploadList.push(file)
      // 返回 falsa 停止自动上传 我们需要手动上传
      console.log(this.uploadList)
      return false
    }
  }
}
</script>
